<template>
	<view style="width: 100%;">
		<view class="u-p-t-22 u-p-b-22">
			<Diary :userInfo="userInfo" :info-data="info" :eclipse="false" :border-bottom="false" :show-action="false"
				:show-tool="false" />
		</view>
		<!--评论-->
		<view class="u-p-l-26 u-p-r-26" style="padding-bottom: 150rpx">
			<view class="u-flex flex-between">
				<view class="title u-font-32 font-b">评论</view>
				<view class="sort u-flex flex-center" @click="show = true">
					<view class="u-font-24 u-m-r-4">{{ currentSort.label }}</view>
					<view>
						<u-icon name='https://app.zbzedu.com/static/WaChat/icon/forum/sort.png' size="20"></u-icon>
					</view>
				</view>
			</view>
			<view v-for="(item, index) in comments" :key="index" class="u-p-t-20 u-border-bottom">
				<Comment :user-info="item.compassNormalUser" :info-data="item" @delete="deleteChange(index)"
					@like-change="res => likeChange(index, res)" />
			</view>
			<loadMore :status="status" />
		</view>
		<!--发表评论-->
		<view class="u-p-l-30 u-p-r-30 fixed-bottom u-flex u-col-center u-border-top " style="z-index: 9999;">
			<view class="input u-flex u-col-center" @click="toPublish">
				<u-icon name="edit-pen-fill" class="u-m-l-32 u-m-r-24" color="rgba(4, 4, 4, .3)" size="40"></u-icon>
				<view class="placeholder" style="color: rgba(4, 4, 4, .3)">分享您的看法</view>
			</view>
			<view class="flex-1 u-flex u-m-b-20" style="justify-content: flex-end">
				<button style="background: transparent;color: #101010;font-size: 28upx" class="button-row" id="shareBtn"
					open-type="share" type="primary">
					<view class="u-flex flex-center">
						<u-icon name='https://app.zbzedu.com/static/WaChat/icon/share.png' color="#888" size="36" class="u-m-r-10">
						</u-icon>
						<span>分享</span>
					</view>
				</button>
				<view class="u-p-20 u-flex flex-center" @click="like">
					<u-icon
						:name="info.likeFlag ? 'https://app.zbzedu.com/static/WaChat/icon/liked.png' : 'https://app.zbzedu.com/static/WaChat/icon/like.png'"
						size="36" class="u-m-r-10"></u-icon>
					<span :class="{'color-active': info.likeFlag }">{{info.likeNum ? info.likeNum : '点赞'}}</span>
				</view>
			</view>
		</view>
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import Diary from '../../pages/forum/components/Diary'
	import {
		request
	} from '../../util/api'
	import loadMore from '../../components/loadMore'
	import Comment from '../../pages/forum/components/Comment'
	import {
		CHECK_TOKEN
	} from '../../util/util'
	import {
		getCurrentFullPath
	} from "../../util/util";
	export default {
		name: 'details',
		components: {
			Diary,
			loadMore,
			Comment
		},
		onLoad(option) {
			this.id = option.id
			// this.getDetails()
		},

		mounted() {
			this.getComments()
			this.status = 'loading'
			this.pageNum = 1
			this.getDetails()
			this.comments = []
		},

		data() {
			return {
				id: '',
				userInfo: {},
				info: {},
				status: 'loading',
				comments: [],
				show: false,
				list: [{
						label: '默认排序',
						value: '1'
					},
					{
						label: '发布时间倒序',
						value: '2'
					},
					{
						label: '发布时间正序',
						value: '3'
					}
				],
				currentSort: {
					value: 1,
					label: '默认排序'
				},
				pageNum: 1
			}
		},

		methods: {
			// 转发功能
			onShareAppMessage(res) {
				return {
					path: getCurrentFullPath()
				}
			},
			deleteChange(index) {
				this.comments.splice(index, 1)
			},

			like() {
				request({
					url: `/system/CompassLikeLog/system/wx/updateLikeLog/${this.info.id}/4`
				}).then(res => {
					if (res.msg == '点赞成功') {
						this.info.likeNum++
					} else {
						this.info.likeNum--
					}
					this.info.likeFlag = !this.info.likeFlag
				})
			},

			likeChange(index, data) {
				const {
					likeFlag,
					likeNum
				} = data
				this.$set(this.comments[index], 'likeFlag', likeFlag)
				this.$set(this.comments[index], 'likeNum', likeNum)
			},

			getDetails() {
				request({
					url: CHECK_TOKEN() ? '/system/CompassDiary/' + this.id : '/system/wx/CompassDiary/' + this.id
				}).then(res => {
					this.userInfo = res.data.compassNormalUser
					this.info = res.data
				})
			},

			getComments() {
				// 已登录发送请求路径
				let openUrl = '/system/CompassDiaryComment/listForId/' + this.id + '/' + this.currentSort.value
				if (!CHECK_TOKEN()) {
					// 未登录跳转的请求路劲
					openUrl = '/system/CompassDiaryComment/listNoLogin/' + this.id + '/' + this.currentSort.value
				}
				request({
					url: openUrl,
					data: {
						pageNum: this.pageNum,
						pageSize: 10
					},
					not_loading: true
				}).then(res => {
					res.rows.forEach(item => {
						item.createTime = new Date(item.createTime.replace(/-/g, '/')).getTime()
					})
					this.comments = this.comments.concat(res.rows)
					this.pageNum++
					if (this.comments.length >= res.total) {
						this.status = 'finished'
					} else {
					}
				})
			},

			toPublish() {
				this.$u.route({
					url: '/package/forum/addComment?id=' + this.id
				})
			},

			confirm(e) {
				this.currentSort = e[0]
				this.comments = []
				this.pageNum = 1
				this.getComments()
			}
		},

		onReachBottom() {
			if (!this.status) {
				this.status = 'loading'
				this.getComments()
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		color: rgba(16, 16, 16, 100);
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		padding-top: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.input {
			width: 380rpx;
			height: 68rpx;
			line-height: 40rpx;
			border-radius: 36rpx;
			background-color: rgba(187, 187, 187, .25);
			margin-bottom: 20rpx;
		}

		.button-row::after {
			content: "";
			border: none;
		}
	}
</style>
